<template>
  <!-- 中文获取对应拼音组件 -->
  <div>
    <div style="width: 300px; margin-bottom: 20px;">
      <el-input
        v-model="value"
        placeholder="请输入中文"
        style="width: 150px"
      ></el-input>
      <el-button @click="clickBtn">获取拼音</el-button>
    </div>
    <div>中文对应拼音结果为：{{ result1 }}</div>
    <div>中文对应拼音首字母结果为：{{ result2 }}</div>
    <div>内容是否含有中文：{{ result3 }}</div>
  </div>
</template>

<script>
import { getPinYin, getPinYinFirstCharacter, isChinese } from '@twa/utils';
export default {
  data() {
    return {
      value: "",
      result1: "",
      result2: "",
      result3: "",
    };
  },
  methods: {
    clickBtn() {
      this.result1 = getPinYin(this.value);
      this.result2 = getPinYinFirstCharacter(this.value);
      this.result3 = isChinese(this.value);
    },
  },
};
</script>